<template>
  <div>
    <div class="allcatin_top">
      <el-button type="success" @click="addtable">添加表格</el-button>
      <el-button type="success" @click="savetable">保存数据</el-button>
    </div>

    <div class="allcatin_hader">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @cell-dblclick="edit"
        :header-cell-style="thStyleFun"
        :cell-style="cellStyleFun"
      >
        <el-table-column label="ID" prop="ID">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.ID"
                @blur="blur(scope.row.userId, scope.row.ID)"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.ID }}</span>
            </el-form>
          </template>
        </el-table-column>
       <!--  @blur="onblur(scope.row.userId, scope.row.NAME)" -->
        <el-table-column label="NAME" prop="NAME">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.NAME"
               
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.NAME }}</span>
            </el-form>
          </template>
        </el-table-column>
       
        <el-table-column label="MAIL" prop="MAIL">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                  @blur="blurmall(scope.row.userId, scope.row.MAIL)"
                v-model="scope.row.MAIL"
                size="mini"
               
              ></el-input>
              <span v-else>{{ scope.row.MAIL }}</span>
              <!-- <span style="margin-left: 10px">{{ scope.row.size_origin }}</span> -->
            </el-form>
          </template>
        </el-table-column>
         
        <el-table-column label="PHONE" prop="PHONE">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                 @blur="blurphone(scope.row.userId, scope.row.PHONE)"
                v-model="scope.row.PHONE"
                size="mini"
               
              ></el-input>
              <span v-else>{{ scope.row.PHONE }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
            :loading="scope.row.isLoading"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//  import qs from 'qs'
export default {
  data() {
    return {
      tablelist: [],
      tableData: [],
    };
  },
  mounted() {
    this.gettablelist();
  },
  methods: {
    gettablelist() {
      this.ajax.get("func/1023/selAlarmMan").then((res) => {
        // console.log(res);
           if(res.status == 200){
                res.data.forEach((ele) => {
                this.$set(ele, "isEdit", false);
                this.$set(ele, "isAbnormal", false);
                });
                this.tableData = res.data;
            }
          })
    },

    thStyleFun() {
      return "text-align: center;background:#696969;color:#fff;text-align:center";
    },
    cellStyleFun() {
      return "text-align:center";
    },

    edit(row, column, cell, event) {
      // console.log(row),
      // console.log(column)
      console.log(cell);
      console.log(event);
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },

    addtable() {
      var obj = {
        ID:'',
        isAbnormal: false,
        isEdit: false,
        MAIL: '',
        NAME: '',
        PHONE:'',
      };
      this.tableData.unshift(obj);
      console.log(this.tableData.length);
    },

    savetable() {
      let ary = [];
      this.tableData.forEach((item) => {
        let obj = {
          ID: item.ID,
          MAIL: item.MAIL,
          NAME: item.NAME,
          PHONE: item.PHONE,
        };
        ary.push(obj);
      });

      for (let i = 0; i < ary.length - 1; i++) {
        // var cont = ary.length
        // console.log(cont)
        if (ary[i].ID == ary[i + 1].ID) {
          this.$alert(ary[i].ID, "id不能相同", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
        }else
         if(ary[i].ID == ""){
            this.blur(ary[i].ID);
        }
        else if(ary[i].NAME == ""){
           this.onblur(ary[i].NAME);
           return
        }else if(ary[i].MAIL == ""){
          var mall = ary[i].MAIL
           this.blurmall(mall);  
          return
        }else if(ary[i].PHONE == ""){
          this.blurphone(ary[i].PHONE);
          return
        }         
      }
          this.ajax({
                method: "POST",
                url: "func/1023/updateAlarmMan?",
                data: ary,
              }).then((res) => {
                //  console.log(res.data.code)
                if (res.data.code == 2000) {
                  this.$message({
                    message: "保存成功",
                    type: "success",
                  });
                  this.gettablelist();
                }else if(res.data.code == 8001){
                        this.$alert( res.data.text,{
                        confirmButtonText: "确定",
                        callback: (action) => {
                          this.$message({
                            type: "info",
                            message: `action: ${action}`,
                          });
                        },
                      });
                }
              });
    },

    blur(id) {
      // console.log("blur事件被执行了",item,id)
      if (id == "") {
        this.$alert("id不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    onblur(id) {
      if (id == "") {
        this.$alert("姓名不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurmall(id,mall) {
      var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!reg.test(mall)) {
       this.$alert( "请正确输入邮箱", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
        
      }
    },

    blurphone(id) {
      console.log(id);
      var reg = /^1[3456789]\d{9}$/;
      if (!reg.test(id)) {
         this.$alert( "请正确输入手机号", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
      }
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      row.isLoading = true;
       this.$confirm('此操作将进行删除操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               this.tableData.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                setTimeout(function () {
                    row.isLoading = false;
                }, 1500)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                row.isLoading = false;
            });
      console.log(index, row);
      // console.log(this.tableData.length)
    },
  },
};
</script>

<style  scoped>
.allcation_cont {
  width: 100%;
}
.allcatin_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  background: #ffffff;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-top: 5px;
  /* padding-right:-10px; */
}
.allcatin_hader {
  margin-top: 30px;
}
</style>